import { Meta } from '@storybook/blocks';

<Meta title="Frameworks/Vue" />

# Using Baklava in Vue

Vue is mostly [compatible](https://custom-elements-everywhere.com/#vue) with custom elements.

## Installation

To add Baklava in your app, you can either import it via CDN or npm package. But one way or another, you should tell Vue to ignore custom elements.

To make the rule more generic, easiest way is ignoring the elements start with `bl-` tag. Thanks to that, every baklava element will be ignored by the Vue.

### Via CDN

To be able to use Baklava via CDN, you should add our default.css and baklava.js at head tag in your index.html file.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava/dist/themes/default.css"/>
<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava/dist/baklava.js"></script>
```

### Via NPM

To be able to use Baklava via npm, run ```npm install @trendyol/baklava```
then,

```js
@import "@trendyol/baklava/dist/themes/default.css";
import { setIconPath } from '@trendyol/baklava'
setIconPath('https://cdn.jsdelivr.net/npm/@trendyol/baklava-icons@latest/icons')
```

#### Vue2

If you use Vue2, you should add ```Vue.config.ignoredElements = [/^bl-/]``` in your main.js.

#### Vue3

If you use Vue3, you can add this
  ```js
  app.config.compilerOptions.isCustomElement = tag => tag.startsWith('bl-');
  ```
  in your main.js before Vue mounts the app.
Also, you can add ignore rule as compiler options to your webpack or vite.

  ```js
  isCustomElement: tag => tag.startsWith('bl-')
  ```
  For Vite:

  ```js
  {
    plugins: [
      vue({
        template: {
          compilerOptions: {
            isCustomElement: tag => tag.startsWith('bl-')
          }
        }
      })
    ]
  }

  ```

  For Webpack with `vue-loader`:

  ```js
  {
    test: /\.vue$/,
    use: {
      loader: "vue-loader",
      options: {
        compilerOptions: {
          isCustomElement: tag => {
            return tag === "custom";
          }
        }
      }
    }
  }
```

### TypeScript

Baklava offers TypeScript support for Vue versions 2.7 and higher. To enable this support, you should create a file named `components.d.ts` within the "src" directory and include the following line:
```ts
/// <reference types="@trendyol/baklava/dist/baklava-vue.d.ts" />
```

#### Eslint Configuration

Baklava components are developed with `kebab case`. Eslint uses `pascal case` by default. If you are using eslint in your project, it will automatically convert the baklava components to `pascal case`. To prevent this, you need to turn off the `pascal case` rule in your project.
To do this, give the following rule in your eslint config file.

```js
  rules: {
    "vue/component-name-in-template-casing": "off",
  },
```
